// 封装的对话框组件
import React, { Component } from "react";
// import { createPortal } from "react-dom";
import "./style.css";
import { bool, func, string, number, oneOfType } from "prop-types";

import withPortal from "./withPortal";

class Modal extends Component {
  static propTypes = {
    open: bool.isRequired,
    width: oneOfType([string, number]),
    title: string,
    onOk: func,
    onCancel: func,
    cancelText: string,
    okText: string,
  };

  static defaultProps = {
    title: "标题",
    width: 500,
    cancelText: "取消",
    okText: "确定",
  };

  render() {
    return (
      this.props.open && (
        <div className="modal">
          <div
            className="center"
            style={{
              width: this.props.width + "px",
            }}
          >
            <h3>{this.props.title}</h3>
            <div className="content">{this.props.children}</div>
            <footer>
              <button onClick={this.props.onCancel}>
                {this.props.cancelText}
              </button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </footer>
          </div>
        </div>
      )
    );
  }
}

// const Modal2 = withPortal(Modal);
// export default Modal2;

export default withPortal(Modal);
